<template>
  <el-button :id="vjson.id" @selectme.native="_selectMe" @click.stop="_selectMe"
             :type="type"
             :size="size"
             :plain="plain"
             :round="round"
             :circle="circle"
             :icon="icon"
             :disabled="disabled"
             :link="link"
             :loading="loading"
             :class="['yv-button', calcClass]"
             :style="calcStyle">
    {{ vjson.text }}
  </el-button>
</template>
<script>
import WebDesignMixin from "../WebDesignMixin"
import ButtonMeta from "./ButtonMeta"
import {renderIcon} from "../webutils"

export default {
  mixins: [WebDesignMixin],
  data() {
    const propsWithDefaults = ButtonMeta.loadVjsonWithDefault(this)
    return {
      text: propsWithDefaults.text,
      type: propsWithDefaults.type,
      size: propsWithDefaults.size,
      plain: propsWithDefaults.plain,
      round: propsWithDefaults.round,
      circle: propsWithDefaults.circle,
      disabled: propsWithDefaults.disabled,
      link: propsWithDefaults.link,
      loading: propsWithDefaults.loading,
    }
  },
  computed: {
    icon() {
      return renderIcon(this.vjson.iconCls)
    },
  },
}
</script>